<!-- 在线监测 -->
<template>
  <view id="app">
    <view class="container">
    <view v-for="item in machinesArray">
      <view class="title">油机号：{{ item.machineNo }} </view>
      <view class="title title-small" v-if="item.strengthValue"
        >浓度：{{ item.strengthValue }}</view
      >

      <view class="machines-box" v-for="(params, index) in item.gunInfos">
        <view> {{ params.gunNo }}#</view>
        <view> 燃油:{{ params.fuelVolume }}</view>
        <view> 油气:{{ params.gasVolume }}</view>
        <view>AL:<text :class="params.ALclass"> {{ params.alRatio }}</text></view>
        <view> {{ params.alRatio }}</view>
      </view>
    </view>

    <view class="divider"></view>
    
    <view class="env-box" v-for="item in envItemsArray">
      <view class="title">{{ item.name }}</view>
      <view>状态：{{ item.alarmState }}</view>
      <view v-if="item.value">数值：{{ item.value }}</view>
    </view>
  </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      machinesArray: [], //处理过后的数据
      envItemsArray: [], //处理过后的数据
      dataArray: {
        client: "B0:02:47:40:55:66",
        code: "0",
        data: {
          envItems: [
            { alarmState: "无效", name: "密闭性" },
            { alarmState: "无效", name: "油罐压力", value: "0.0" },
            { alarmState: "无效", name: "管线压力", value: "0.0" },
            { alarmState: "无效", name: "卸油区浓度", value: "0.0" },
            { name: "油气温度", value: "0.0" },
          ],
          machines: [
            {
              gunInfos: [
                {
                  alRatio: 0,
                  alarmState: "无效",
                  fuelVolume: 0,
                  gasVolume: 0,
                  gunNo: 1,
                  xs: "1000",
                },
                {
                  alRatio: 0,
                  alarmState: "正常",
                  fuelVolume: 0,
                  gasVolume: 0,
                  gunNo: 2,
                  xs: "1000",
                },
              ],
              machineNo: 1,
              strengthValue: "20.56",
            },
            {
              gunInfos: [
                {
                  alRatio: 0,
                  alarmState: "预警",
                  fuelVolume: 0,
                  gasVolume: 0,
                  gunNo: 3,
                  xs: "1000",
                },
                {
                  alRatio: 0,
                  alarmState: "报警",
                  fuelVolume: 0,
                  gasVolume: 0,
                  gunNo: 9,
                  xs: "1000",
                },
              ],
              machineNo: 2,
            },
          ],
        },
        msg: "在线监测实时状态",
        version: "39",
      },
      allData: null,
      datalist1: [],
      datalist2: [],
      showObj: [
        {
          name: "卸油区浓度",
          icon: "/pagesA/static/emissionDensity.png ",
          content: "",
          unit: "ppm",
        },
        {
          name: "后处理浓度",
          icon: "/pagesA/static/emissionDensity.png",
          content: "",
          unit: "ppm",
        },
        {
          name: "温度",
          icon: "/pagesA/static/carbonTankTemp.png",
          content: "",
          unit: "℃",
        },
        {
          name: "油罐压力",
          icon: "/pagesA/static/carbonTankPressure.png",
          content: "",
          unit: "Pa",
        },
        {
          name: "液阻",
          icon: "/pagesA/static/carbonTankPressure.png",
          content: "",
          unit: "Pa",
        },
        {
          name: "联机",
          icon: "/pagesA/static/runState.png",
          content: "",
          unit: "",
        },
      ],
      cardList: [],
    };
  },
  onLoad(options) {
    // this.$store.commit("modifyMsg", null);

    // console.log("options:", options);
    // this.productKey = options.productKey;
    // this.deviceName = options.deviceName;
    // this.loading();

    // this.getData();

    this.initDataStruct();
  },
  onUnload() {
    console.log("卸载页面");
    this.clearTopic();
  },
  methods: {
    /* 初始化展示数组的数据结构 */
    initDataStruct() {
      this.machinesArray = JSON.parse(JSON.stringify(this.dataArray.data.machines));
      for (let element of this.machinesArray) {
        for (let iterator of element.gunInfos) {
          this.configALClass(iterator);
        }
      }
      // console.log( this.machinesArray);
      this.envItemsArray = JSON.parse(JSON.stringify(this.dataArray.data.envItems));
    },
    /* 把数据处理成需要的格式 */
    configALClass(iterator) {
      switch (iterator.alarmState) {
        case "无效":
          iterator.ALclass = "item-value-invalid";
          break;
        case "正常":
          iterator.ALclass = "item-value-normal";
          break;
        case "预警":
          iterator.ALclass = "item-value-alarm";
          break;
        case "报警":
          iterator.ALclass = "item-value-alarm";
          break;
        default:
          break;
      }
    },
    loading() {
      uni.showToast({
        title: "加载中...",
        icon: "loading",
        duration: 10000,
      });
    },
    getData() {
      var that = this;
      that.loading();
      that.$store.commit("modifyMsg", null);

      that.subsTopic =
        "sys/" +
        that.productKey +
        "/" +
        that.deviceName +
        "/thing/event/property/post/requestOil2";
      that.pubtopic =
        "sys/" + that.productKey + "/" + that.deviceName + "/thing/service/requestOil2";

      this.$store.getters.getState.client.subscribe(that.subsTopic);
      this.$store.getters.getState.client.publish(that.pubtopic);

      this.timer = setInterval(() => {
        if (that.$store.getters.getState.message) {
          that.allData = that.$store.getters.getState.message.data;
          that.cardList = that.allData.gun;
          // console.log('alldata:', that.allData);
          // console.log('that.cardList:', that.cardList);
          uni.hideToast();
          this.initData();
        }
      }, 200);
    },
    /**
     * 给上面卡片赋值
     * */
    initData() {
      this.showObj[0].content = this.allData.xnd;
      this.showObj[1].content = this.allData.hclnd;
      this.showObj[2].content = this.allData.wd;
      this.showObj[3].content = this.allData.yl;
      this.showObj[4].content = this.allData.yz;
      if (this.allData.connect == true) {
        this.showObj[5].content = "正常";
      } else {
        this.showObj[5].content = "失败";
      }

      this.datalist1 = [];
      this.datalist2 = [];

      for (let i = 0; i < this.showObj.length; i++) {
        var temp = this.showObj[i];
        if (i % 2 == 0) {
          this.datalist1.push(temp);
        } else {
          this.datalist2.push(temp);
        }
      }
    },
    clearTopic() {
      var that = this;
      this.$store.getters.getState.client.unsubscribe(that.subsTopic);
      clearInterval(this.timer);
    },
  },
};
</script>

<style scoped>
#app{
  padding: 20rpx;
}
.container {
  padding: 10rpx;
  background-color: #525b62;
}
.title {
  display: inline-block;
  color: white;
  font-size: larger;
  font-weight: bolder;
  margin: 10rpx;
}
.title-small {
  font-weight: normal;
  font-size: medium;
}
.machines-box {
  display: flex;
  justify-content: space-evenly;
  color: white;
  color: white;
  margin: 10rpx 5rpx;
  border: 1rpx solid white;
}

.item-value-invalid {
  color: rgb(250, 247, 98);
}
.item-value-alarm {
  color: rgb(255, 0, 0);
}
.item-value-normal {
  color: rgb(6, 247, 6);
}

.divider {
  height: 1rpx;
  margin: 20rpx 5rpx;
  border-bottom: 10rpx dotted greenyellow;
}
.env-box {
  color: white;
  margin: 10rpx 5rpx;
  border: 1rpx solid white;
}
.env-box > view {
  margin: 10rpx;
}
</style>
